
<template>
<div style="overflow: hidden">
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/admin/index' }">
        <i class="el-icon-s-promotion"></i>
        管理后台首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>入住登记信息</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <el-button type="success" icon="el-icon-folder-opened" @click="exportExcel">导出Excel</el-button>
    <el-button type="primary" icon="el-icon-edit" style="margin-left: 30px" @click="addNew">添加</el-button>
    <el-button type="warning" icon="el-icon-delete"  @click="deleteByids">删除</el-button>
    <el-input placeholder="请输入搜索的姓名" v-model="Content" class="input-with-select" style="width: 250px;position: relative;left: 40%">
      <el-button slot="append" icon="el-icon-search" @click="checkSelectByname()"></el-button>
    </el-input>
    <el-table id ="selectTable" :data="checkInfoArr" style="overflow: scroll;height: 675PX;margin-top: 5px"   @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" :index="indexMethod"label="编号"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
      <el-table-column prop="age" label="性别"></el-table-column>
      <el-table-column prop="phoneNumber" label="手机号"></el-table-column>
      <el-table-column prop="date" label="入住登记时间"></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="warning"
              @click="checkUpdate(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
              size="mini"
              type="info"
              @click="checkDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="block" style="position: absolute;bottom:20px;left: 40%;">
      <el-pagination  background
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage"
                      :page-sizes="[10,20,30,40,50,60]"
                      :page-size="currentPageSize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total">
      </el-pagination>
    </div>
  </div>
</div>
</template>
<script>
//前端导出excel方法【未完善】
import FileSaver from "file-saver";
import * as XLSX from 'xlsx';
  /*
  const  toExcel= {
    getExcel(dom,title='默认标题',){
      var excelTitle = title;
      var wb = XLSX.utils.table_to_book(document.getElementById(dom));
      /!* 获取二进制字符串作为输出 *!/
      var wbout = XLSX.writeFileXLSX(wb, {bookType: "xlsx",bookSST: true,type: "array"});
      try {
        FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream" }),
            excelTitle + ".xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    }
  };
  */

import {exportExcelJS} from '../../../assets/exportExcel.js'
export default {
  data: function () {
    return {
      checkInfoArr:[],
      currentPage:1,
      currentPageSize:10,
      total:"0",
      Content:"",
      multipleSelection: []
    }
  }, methods:{
    //后端导出excel方法
    exportExcel() {
      //导入已经封装好的excel方法 -------第79行------请求后端的路径传进去就行了！
     exportExcelJS("http://localhost:8080/checkInfo/list-excel");
    },
    checkSelectByname()
    {
      this.limit();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },   //入住登记修改
    checkUpdate(i, c) {
         location.href="/admin/check/checkInfo/update?id="+c.id;
    },
    //入住登记删除
    checkDelete(i, c) {
      if(confirm("确定删除此入住信息吗?")) {
        this.axios.create({
              headers:{
                'Authorization':localStorage.getItem("jwt")
              }
            }
        ).post("http://localhost:8080/checkInfo/" + c.id + "/delete").then((response) => {
          if (response.data.state == 20000) {
            this.$message.success("删除成功!");
            this.limit();
          }
          else {
            this.$message.error(response.data.message);
          }
        })

      }
    },
    deleteByids()
    {
      if(this.multipleSelection.length==0)
      {
        this.$message.error("请选择要删除的数据！");
        return;
      }
      let ids=[];
      for (let item of this.multipleSelection) {
        ids.push(JSON.stringify(item.id));
      }
      if(confirm("您确定要删除这些数据吗？"))
      {
        /*console.log(this.qs.stringify({id:ids},{ arrayFormat: 'repeat'}))*/
       this.axios.create({
             headers:{
               'Authorization':localStorage.getItem("jwt")
             }
           }
       ).post("http://localhost:8080/checkInfo/delete/BatchByids",ids).then((response)=>
       {
         if(response.data.state==20000)
         {
           this.$message.success("删除成功！");
           this.multipleSelection=[];
           this.limit();
         }
         else {
           this.$message.error(response.data.message);
         }
       });
      }
    },
    addNew()
    {
      location.href="/admin/check/checkInfo/addNew";
    },
    handleSizeChange(val) {
      this.currentPageSize=val;
      this.limit();
    },
   handleCurrentChange(val) {
      this.currentPage=val;
     this.limit();
    },
    limit()
    {
      let check = {page:this.currentPage,size:this.currentPageSize,Content:this.Content};
      console.log(this.qs.stringify(check));
      this.axios.create({
            headers:{
              'Authorization':localStorage.getItem("jwt")
            }
          }
      ).get("http://localhost:8080/checkInfo/list-limit?"+this.qs.stringify(check)).then((response)=>
      {
        this.checkInfoArr = response.data;
      })
      this.axios.create({
            headers:{
              'Authorization':localStorage.getItem("jwt")
            }
          }
      ).get("http://localhost:8080/checkInfo/list/count?Content="+this.Content).then((response)=>
      {
        this.total = response.data;
      })
    },
    //解决分页时表格index编号从1开始
    indexMethod(index)
    {
      return (this.currentPage-1)*this.currentPageSize+index+1;
    }
  },
  mounted:function ()
  {
       this.limit();
  }

}
</script>

<style scoped>

</style>